<template>
	<view class="nickname">
		<view class="font14 title">{{name?'名称':'我在组里的昵称'}}</view>
		<view class="flex alignCenter inputBox justConBetween">
			<input class="font14" v-if="operType!=2" maxlength="20" v-model.trim="name" placeholder="记得填写哦" placeholder-class="font14 color666"/>
			<uni-icons class="clear" type="clear" size="22" @click="name=''" v-if="name"></uni-icons>
			<input class="font14" v-if="operType==2" maxlength="10" v-model.trim="nickname" placeholder="记得填写哦" placeholder-class="font14 color666"/>
			<uni-icons class="clear" type="clear" size="22" @click="nickname=''" v-if="nickname"></uni-icons>
		</view>
		<view class="font12 color999">{{name?'名称':'我在组里的昵称'}}最多只能输入{{name?'20':'10'}}个字符且只能包含数字、字母、汉字哦~</view>
		<view class="noWidthBtn font14" @click="save">保存</view>
	</view>
</template>

<script>
	import { editGroupInfo,operMember,editActivityInfo } from "@/api/send.js"
	import { userName } from "@/utils/verification.js"
	export default {
		data() {
			return {
				name:'',
				editId:'',
				nickname:'',
				operType:1,
				from:''
			}
		},
		onLoad(option) {
			let query=JSON.parse(option.query)
			this.name=query.name?query.name:''
			this.nickname=query.nickname?query.nickname:''
			this.editId=query.id?query.id:''
			this.from=query.from?query.from:''
			this.operType=(query.from=='group'?(query.name?1:2):3)//1修改小组名称； 2修改组内昵称； 3修改活动名称
		},
		onReady() {
			if(this.operType==2){
				uni.setNavigationBarTitle({
					title:'修改我在组内的昵称'
				})
			}
		},
		methods: {
			save(){
				if(this.operType!=2){
					this.editTitle()
					return
				}else if(this.operType==2){
					this.editGroupNickname()
					return
				}
			},
			// 修改我在组里的昵称
			editGroupNickname(){
				if(!this.nickname){
					uni.showToast({
						icon:'none',
						title:'请填写昵称！'
					})
					return
				}else if(this.nickname.length>10){
					uni.showToast({
						icon:'none',
						title:'长度不能超过10个字符！'
					})
					return
				}else if(!(userName.test(this.nickname))){
					uni.showToast({
						icon:'none',
						title:'昵称只能包含汉字、字母、数字！'
					})
					return
				}
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				let param={
					teamId:this.editId,
					createUserName:this.nickname
				}
				operMember(param).then((res)=>{
					uni.hideLoading()
					if(res.code==100000){
						uni.showToast({
							icon:'none',
							title:'修改成功'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},2000)
					}
				}).catch((err)=>{uni.hideLoading()})
			},
			// 修改小组、活动名称
			editTitle(){
				if(!this.name){
					uni.showToast({
						icon:'none',
						title:'请填写名称！'
					})
					return
				}else if(this.name.length>20){
					uni.showToast({
						icon:'none',
						title:'长度不能超过20个字符！'
					})
					return
				}else if(!(userName.test(this.name))){
					uni.showToast({
						icon:'none',
						title:'名称只能包含汉字、字母、数字！'
					})
					return
				}
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				let param={
					id:this.editId,
					name:this.name
				}
				if(this.operType==1){
					editGroupInfo(param).then((res)=>{
						uni.hideLoading()
						if(res.code==100000){
							uni.showToast({
								icon:'none',
								title:'修改成功'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						}
					}).catch((err)=>{uni.hideLoading()})
					return
				}else{
					editActivityInfo(param).then((res)=>{
						uni.hideLoading()
						if(res.code==100000){
							uni.showToast({
								icon:'none',
								title:'修改成功'
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						}
					}).catch((err)=>{uni.hideLoading()})
					return
				}
				
			}
		}
	}
</script>

<style scoped lang="scss">
@import "@/static/public.scss";
.nickname{
	padding: 30rpx;
	box-sizing: border-box;
	.title{
		margin: 0 0 30rpx;
	}
	.inputBox{
		border-bottom: 1px solid $bordercolor;
		input{
			height: 70rpx;
			line-height: 70rpx;
			width: 100%;
		}
		.clear{
			flex-shrink: 0;
		}
	}
	.noWidthBtn{
		width: 200rpx;
		margin: 100rpx auto 0;
	}
}

</style>
